import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bmfmap_example/componets/glass_widget.dart';
import 'package:flutter_svg/svg.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';

class RoomPage extends StatefulWidget {
  const RoomPage({Key key}) : super(key: key);

  @override
  _RoomPageState createState() => _RoomPageState();
}

class _RoomPageState extends State<RoomPage>
    with SingleTickerProviderStateMixin {

  Animation<double> animation;
  AnimationController controller;
  
  int _currentindex = 0;
  String roomdevicesjson;

  dispose() {
    controller.dispose();
    super.dispose();
  }

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    animation = new Tween(begin: 0.0, end: 20.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: new LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color.fromRGBO(240, 187, 245, 1),
              Color.fromRGBO(240, 200, 245, 1),
            ]),
      ),
      width: MediaQuery.of(context).size.width,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          // leading: Icons.backup,
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 24),
              child: Icon(Icons.more_horiz_outlined),
            )
          ],
        ),
        body: ListView(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 32.0),
              child: Text(
                '客厅',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 32.0, right: 32, top: 16),
              child: Container(
                height: 56,
                // color: Colors.black12,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    _builddeviceitemtittle('监控',0,_currentindex),
                    _builddeviceitemtittle('空调',1,_currentindex),
                    _builddeviceitemtittle('灯泡',2,_currentindex),
                    _builddeviceitemtittle('温湿度表',3,_currentindex),
                    
                  ],
                ),
              ),
            ),
            Container(
              height: 220,
              child: PageView(
                onPageChanged: (index) {
                  _currentindex = index;
                  setState(() {
                    
                  });
                },
                children: [
                  _builddeviceitem('监控'),
                  _builddeviceitem('空调'),
                  _builddeviceitem('台灯'),
                  _builddeviceitem('温湿度表'),
                ],
              ),
            ),
          ],
        ),
        bottomNavigationBar: GlassWidget(
          height: 368,
          borderRadius: 40,
          blur: 10,
          linearGradientBeginOpacity: 0.4,
          linearGradientEndOpacity: 0.4,
          borderGradientBeginOpacity: 0.1,
          borderGradientEndOpacity: 0.5,
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 8.0, left: 32, right: 32),
                child: Row(
                  children: [
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '某某牌监控器',
                            style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.w600,
                                height: 1.6),
                          ),
                          Text('nest jk001'),
                        ],
                      ),
                    ),
                    Center(
                      child: Image.asset(
                        'assets/images/common/device/监控.png',
                        height: 64,
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(24.0),
                  child: Container(
                    padding: EdgeInsets.only(top: 32, left: 32, right: 32),
                    width: 400,
                    decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: new BorderRadius.circular((24.0)),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '状态',
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w600,
                              height: 1.6),
                        ),
                        Row(
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(right: 16),
                              child: Container(
                                padding: EdgeInsets.only(
                                    top: 4, bottom: 4, left: 16, right: 16),
                                decoration: new BoxDecoration(
                                  color: Color.fromRGBO(232, 250, 255, 1),
                                  borderRadius:
                                      new BorderRadius.circular((24.0)),
                                ),
                                child: Text(
                                  '监控器一',
                                  style: TextStyle(
                                      fontSize: 12,
                                      fontWeight: FontWeight.w300,
                                      height: 1.6),
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(right: 16),
                              child: Container(
                                padding: EdgeInsets.only(
                                    top: 4, bottom: 4, left: 16, right: 16),
                                decoration: new BoxDecoration(
                                  color: Color.fromRGBO(196, 238, 252, 1),
                                  borderRadius:
                                      new BorderRadius.circular((24.0)),
                                ),
                                child: Text(
                                  '监控器二',
                                  style: TextStyle(
                                      fontSize: 12,
                                      fontWeight: FontWeight.w300,
                                      height: 1.6),
                                ),
                              ),
                            ),
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 16.0),
                          child: Text(
                            '电量',
                            style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w500,
                                height: 1.6),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: LinearPercentIndicator(
                            lineHeight: 8.0,
                            percent: 0.3, //设置比例
                            animation: true,
                            animationDuration: 500, //动画时长
                            backgroundColor: Color.fromRGBO(231, 243, 242, 1),
                            progressColor: Color.fromRGBO(90, 148, 242, 1),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 16.0),
                          child: Text(
                            '存储',
                            style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w500,
                                height: 1.6),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: LinearPercentIndicator(
                            lineHeight: 8.0,
                            percent: 0.66, //设置比例
                            animation: true,
                            animationDuration: 500, //动画时长
                            backgroundColor: Color.fromRGBO(231, 243, 242, 1),
                            progressColor: Color.fromRGBO(247, 117, 83, 1),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _builddeviceitemtittle(String name, int index, int curretindex) {
    return Container(
      width: 56,
      decoration: new BoxDecoration(
        color: index==curretindex?Colors.white:Color.fromRGBO(215, 215, 215, 1),
        borderRadius: new BorderRadius.circular((16.0)),
      ),
      child: Center(
        child: SvgPicture.asset(
          "assets/images/icons/svg/$name.svg",
          color: Color.fromRGBO(158, 154, 203, 1),
          width: 36,
        ),
      ),
    );
  }

  _builddeviceitem(String name) {
    return Container(
      height: 220,
      child: Stack(alignment: Alignment.center, children: [
        Positioned(
          bottom: animation.value,
          // bottom: 0,
          child: Image.asset(
            'assets/images/common/device/$name.png',
            height: 200,
          ),
        ),
        Positioned(
          bottom: 8,
          child: Container(
            width: 120,
            height: 20,
            decoration: new BoxDecoration(
              color: Colors.transparent,
              borderRadius: new BorderRadius.circular((60.0)),
              boxShadow: [
                BoxShadow(
                    color: Color.fromRGBO(10, 10, 10, 0.1),
                    offset: Offset(0.0, 0.0), //阴影xy轴偏移量
                    blurRadius: 10.0, //阴影模糊程度
                    spreadRadius: 1 //阴影扩散程度
                    )
              ],
            ),
          ),
        ),
      ]),
    );
  }
}
